<script lang="ts" setup>
import { asyncComputed } from "@vueuse/core"
import EqIcon from "./eq-icon.vue"
import { useEquipStore } from "@/store"


interface IFas {
  title: string
  eqs: {
    typeName: string
    id: number
    props: string[]
    groupId: number
    type: number
  }[]
}

const props = defineProps({
  fas: {
    type: Array as PropType<IFas[]>,
    default: () => []
  }
})

const emit = defineEmits(["select"])

const store = useEquipStore()

const fans = computed(() => props.fas)

const myFangans = asyncComputed(async () => {
  const eqs: {
    typeName: string
    id: number
    props: string[]
    groupId: number
    type: number
  }[] = await store.loadEqsForSH()
  const fasss = []
  for (const f of fans.value) {
    const fa: { title: string; eqids: any[]; eqs: any[]; allEqs: any[] } = { title: f.title, eqids: [...f.eqs], eqs: [], allEqs: [] }
    const tms = []
    for (const e of fa.eqids) {
      const eq = eqs.find(x => x.id == e.id)
      if (eq && eq.typeName != "称号") {
        if (eq.groupId != 4 && !(eq.groupId == 10 && eq.type == 1)) {
          fa.eqs.push({ ...eq })
        } else { tms.push({ ...eq }) }
      }
      if (eq) {
        fa.allEqs.push({ ...eq, props: e.props })
      }
    }
    for (const tm of tms) {
      const eq = fa.eqs.find(x => x.typeName == tm.typeName)
      if (eq) {
        eq.island = tm
      }
    }

    fasss.push(fa)
  }
  return fasss
})

// const initFas = async () => {
//   const eqs = await store.loadEqsForSH()
//   const fasss = []
//   for (const f of fans.value) {
//     const fa = { title: f.title, eqids: [...f.eqs], eqs: [], allEqs: [] }
//     const tms = []
//     for (const e of fa.eqids) {
//       const eq = eqs.find(x => x.id == e.id)
//       if (eq && eq.typeName != "称号") {
//         if (eq.groupId != 4 && !(eq.groupId == 10 && eq.type == 1)) {
//           fa.eqs.push({ ...eq })
//         } else { tms.push({ ...eq }) }
//       }
//       if (eq) {
//         fa.allEqs.push({ ...eq, props: e.props })
//       }
//     }
//     for (const tm of tms) {
//       const eq = fa.eqs.find(x => x.typeName == tm.typeName)
//       if (eq) {
//         eq.island = tm
//       }
//     }

//     fasss.push(fa)
//   }

//   myFangans.value = fasss
// }

// watch(() => fans.value, async () => await initFas())

// onMounted(async () => {
//   await initFas()
// })

const selectFa = (item: any) => {
  emit("select", item)
}
</script>

<template>
  <view class="fa-content">
    <view v-for="(item, index) in myFangans" :key="index" class="fa-item" @click="selectFa(item)">
      <view class="title">
        {{ item.title }}
      </view>
      <view class="fa-eqs">
        <view v-for="(eq, j) in item.eqs" :key="j" class="eq-item-box">
          <EqIcon class="eq-item" :eq="eq" not-use-island />
          <EqIcon v-if="eq.island" class="small-icon" small-icon :eq="eq" />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.fa-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .fa-item {
    padding: 10px 5px 5px 10px;
    border: 1px solid #303030;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 10px;

    .title {
      margin-bottom: 10px;
      border-bottom: 1px solid #303030;
      width: calc(100% - 2px);
      padding-bottom: 7px;
      overflow: hidden;
    }

    .fa-eqs {
      display: flex;
      flex-wrap: wrap;

      .eq-item-box {
        position: relative;
        margin-right: 9px;
        margin-bottom: 4px;

        .small-icon {
          position: absolute;
          z-index: 1;
          bottom: -6px;
          right: -6px;
        }
      }
    }

  }
}
</style>
